<ng-container *ngFor="let event of events" @myInsertRemoveTrigger>
  <ng-container [ngSwitch]="event.type">

    <ng-container *ngSwitchCase="'ProductProcessSubmitEvent'">
      <app-product-process-submit-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-product-process-submit-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'PackageBoxEvent'">
      <app-package-box-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-package-box-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'DyeingPrepareEvent'">
      <app-dyeing-prepare-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-dyeing-prepare-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'SilkRuntimeDetachEvent'">
      <app-silk-runtime-detach-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-silk-runtime-detach-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'SilkCarRuntimeAppendEvent'">
      <app-silk-car-runtime-append-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-silk-car-runtime-append-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'SilkCarRuntimeGradeEvent'">
      <app-silk-car-runtime-grade-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-silk-car-runtime-grade-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'ToDtyEvent'">
      <app-to-dty-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-to-dty-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'ToDtyConfirmEvent'">
      <app-to-dty-confirm-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-to-dty-confirm-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'JikonAdapterSilkCarInfoFetchEvent'">
      <app-jikon-adapter-silk-car-info-fetch-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-jikon-adapter-silk-car-info-fetch-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'RiambSilkCarInfoFetchEvent'">
      <app-riamb-silk-car-info-fetch-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-riamb-silk-car-info-fetch-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'SilkNoteFeedbackEvent'">
      <app-silk-note-feedback-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-silk-note-feedback-event>
      <mat-divider></mat-divider>
    </ng-container>

    <ng-container *ngSwitchCase="'RiambSilkDetachEvent'">
      <ng-container *ngIf="setting.showAll">
        <app-riamb-silk-detach-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-riamb-silk-detach-event>
        <mat-divider></mat-divider>
      </ng-container>
    </ng-container>

    <ng-container *ngSwitchCase="'JikonAdapterSilkDetachEvent'">
      <ng-container *ngIf="setting.showAll">
        <app-jikon-adapter-silk-detach-event [event]="event" [silkCarRecord]="silkCarRecord" [silkCarRuntime]="silkCarRuntime" class="flow-card-event"></app-jikon-adapter-silk-detach-event>
        <mat-divider></mat-divider>
      </ng-container>
    </ng-container>

    <ng-container *ngSwitchDefault>
      <div class="flow-card-event">
        <header fxLayout fxLayoutAlign="start center">
          <span>{{event.operator.name}}</span>
          <span fxFlex>{{event.fireDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</span>
          <button mat-button type="button">
            {{('EventSourceType.' + event.type)|translate}}
          </button>
        </header>
        <section>
          {{event|json}}
        </section>
      </div>
      <mat-divider></mat-divider>
    </ng-container>
  </ng-container>
</ng-container>
